﻿<!DOCTYPE HTML>
<html>

<head>
   <title>读取并修改元素的属性</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/03-tabs.css" />
   <style></style>

</head>

<body>
   <h2>实现多标签页效果</h2>
   <div class="tabs">
      <ul id="tab">
         <li><a href="javascript:;" data-click="tab" data-id="content1">10元套餐</a></li>
         <li><a href="javascript:;" data-click="tab" data-id="content2">30元套餐</a></li>
         <li><a href="javascript:;" data-click="tab" data-id="content3">50元包月</a></li>
      </ul>
      <div id="container">
         <div id="content1" style="z-index:9">
            10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
         </div>
         <div id="content2">
            30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
         </div>
         <div id="content3">
            50元包月详情：<br />&nbsp;每月无限量随心打
         </div>
      </div>
   </div>
   <script>
      //DOM 4步
      //1. 查找触发事件的元素
      //2. 绑定事件处理函数
      //3. 查找要修改的元素
      //4. 修改元素

      //1. 查找触发事件的元素
      //查找有data-click属性，且属性值为tab的元素
      var tabs = document.querySelectorAll(
         "[data-click=tab]"
      )
      //2. 绑定事件处理函数
      //先定义一个全局变量index=10，用来累计现在zIndex的数值
      var index = 10;
      //遍历每个标签页
      for (var tab of tabs) {
         //为每个标签页绑定单击事件
         tab.onclick = function () {
            //3. 查找触发事件的元素
            //先获得当前tab
            var tab = this;
            //先从当前tab的data-id属性中获得当前tab对应div的id
            var id = tab.getAttribute("data-id");
            //或tab.dataset.id
            //用id查找当前tab对应的div
            var div = document.getElementById(id); //不加""，因为id是前边一个变量
            //修改当前tab对应的div的zIndex为更大的一个数
            div.style.zIndex = index++;
         }
      }
   </script>
</body>

</html>